<template>
	<div class="index">
		<div class="center">
			<left></left>
			<div class="right">
				<top></top>
				<div class="hei10"></div>
				<div class="t_nav_box">
					<router-link to="/myDistributor">
						<el-button type="text"><<返回</el-button>
					</router-link>
					<span style="margin-left: 20px;">分销商标签管理</span>
				</div>
				<el-button @click="addfzbtn(1)" style="margin-left: 20px;" type="danger" round>添加标签</el-button>
				<div style="padding: 20px;">
					<el-table
					:data="tableData"
					:header-cell-style="{
					background:'#F4F4F4',
					color:'#7D8087'}"
					style="width: 100%">
						<el-table-column
							prop="title"
							align="center"
							label="标签名称">
						</el-table-column>
						<el-table-column
							prop="class"
							align="center"
							label="标签分类">
						</el-table-column>
						<el-table-column
							prop="created_at"
							align="center"
							label="添加时间">
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button
								size="mini"
								type="text"
								@click="addfzbtn(scope.row)">编辑</el-button>
								<el-button
								size="mini"
								type="text"
								@click="delfzbtn(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>

			</div>
		</div>
		<!-- 添加分组 -->
		<el-dialog
			:title="windname"
			:visible.sync="openfzwind"
			center
			:close-on-click-modal="false"
			width="520px">
			<div>
				<el-input style="width: 100%;margin-bottom: 20px;" v-model="title" maxlength="10" placeholder="输入标签名称"></el-input>
			</div>
			<div style="text-align: center;">
				<el-button type="danger" @click="createfz" round>{{ surebtnname }}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'

	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot,

		},
		name: 'addtag',
		data() {
			return {
				tableData: [],
				openfzwind:false,
				title:'',
				windname:"",
				row:'',
				surebtnname:''
			}
		},
		beforeDestroy() {

		},
		created() {
		  //获取列表
			this.getlist()
		},
		methods: {
			//获取列表
			getlist(){
				axios.get('/api/plan-market/reseller/label/list')
					.then(response => {
						if(response.data.msg.code == 0){
							console.log('列表')
							console.log(response)
							this.tableData = response.data.data
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//打开分组
			addfzbtn(row){
				this.openfzwind = true
				this.row = row
				console.log(row)
				if(row==1){
					//新增
					this.windname = '添加标签'
					this.title = ''
					this.surebtnname = '创建标签'
				}else{
					//编辑
					this.windname = '编辑标签'
					this.title = this.row.title
					this.surebtnname = '修改标签'
				}
			},
			//提交
			createfz(){
				if(this.row==1){
					//新增
					var form = {title:this.title}
				}else{
					//编辑
					var form = {title:this.title,id:this.row.id}

				}
				axios.post('/api/plan-market/reseller/label/set',form)
					.then(response => {
						if(response.data.msg.code == 0){
							this.openfzwind = false
							this.$message({
								message: '操作成功',
								type: 'success'
							});
							this.getlist()
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//删除
			delfzbtn(id){
				this.$confirm('是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post('/api/plan-market/reseller/label/delete',{id:id})
					.then(response => {
						if(response.data.msg.code == 0){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getlist()
						}else{
							this.$message.error(response.data.msg.info);
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}

		}

	}
</script>
<style scoped>
	.t_nav_box{
		padding: 30px 20px 20px 20px;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.index {

    /deep/ .el-select{width: 250px; margin-right: 20px;}
    /deep/ .el-input{width: 250px; margin-right: 20px;}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250); border: 0;}
    /deep/ .el-range-editor .el-range-input { background: #f7f8fa;}
    // /deep/ .el-button{ padding: 11px 23px !important;}

    /deep/ .el-input__inner:-moz-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
        color: rgb(140, 140, 140);
    }
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    /deep/ .el-button--danger.is-plain {
        color: #18A0FB !important;
        background: #EEF7FF !important;
        border-color: #18A0FB !important;
    }

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272;
				}

				.add {
					display: flex;
					justify-content: space-between;
					padding: 20px 30px;
					text-align: right;
					position: relative;

					.input-with-select {
						width: 280px;
					}

					.el-button {
						padding: 10px 20px;
					}
				}

				.list {
					display: flex;
					text-align: center;
					color: #727272;
					line-height: 45px;
					margin: 0 20px;
					border: 1px #EAEAEA solid;
					margin-top: -1px;

					.th {
						flex: 1;
						background: #F9F9F9;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

					.td {
						flex: 1;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;

						.el-button {
							a {
								color: #409EFF;
							}

							&:hover {
								a {
									color: #FFF;
								}
							}
						}

					}

					.th1 {
						flex-basis: 50px;
						background: #F9F9F9;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

					.td1 {
						flex-basis: 50px;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

				}

				.el-pagination {
					text-align: right;
					margin: 20px 0
				}

				.my {
					display: flex;
					justify-content: space-between;
					padding: 20px;
					line-height: 20px;
					align-items: center;

					.myid {
						font-size: 17px;
						color: #DD2727;
						padding-left: 10px;
						display: flex;
						align-items: center;

						.tip {
							display: inline-flex;
							flex-direction: column;

							span {
								color: #B1B1B1;
								font-size: 14px;
								margin: 0 20px
							}
						}
					}

					.invitation {
						font-size: 14px;
						color: #B1B1B1;

						span {
							color: #197CFF;
							cursor: pointer;
						}
					}
				}


	}
</style>
